<template>
  <div class="container" >
      <el-tabs
        v-model="editableTabsValue"
        type="card"
        @tab-remove="removeTab"
        @tab-click="getRouter"
      >
        <el-tab-pane
          v-for="(item, index) in editableTabs"
          :key="index"
          :closable="index !== 0"
          :label="item.meta.title"
          :name="item.fullPath"
        >
      </el-tab-pane>
    </el-tabs>
   
  </div>
</template>
<script lang="ts" setup>
import { defineComponent, ref, onMounted ,inject,watch} from "vue";
import bus from "@/mitt";
import { useRouter } from "vue-router";
import {
	getCurrentInstance
	} from "vue";
const {proxy} = getCurrentInstance();

  // const store = inject('store')
  // const store_state = inject('store_state')
  const router = useRouter()
  
  let editableTabsValue = proxy.$store_state.NowRouterPath;
  let editableTabs = proxy.$store_state.TabsList

    // 页面加载时执行
    onMounted(() => {});
    // 移除选项卡
    const removeTab = (targetName: string) => {
      proxy.$store.DeleteTabsItem(targetName)
      router.push(proxy.$store_state.TabDelete_ToPath.value)
    };
    // 点击选项卡
    const getRouter = (paths: any,data:any) => {
      router.push(paths.props.name)
      // console.log(paths.props.name ,'asdas');
      
      proxy.$store.getTitle(paths.props.name)
      
    };

</script>

<style scoped lang="less">
.container {
  height: var(--Tabs_heigth);
  ::v-deep.el-tabs__header {
    background-color: white;
  }
  ::v-deep .el-tabs__item.is-active {
    background-color: #d7e7f7;
    border-bottom: 2px solid #409eff;
  }
}
::v-deep(.el-tabs__nav-scroll){
      height: var(--Tabs_heigth);
      background-color: white;
}

::v-deep(.el-tabs){
      --el-tabs-header-height: var(--Tabs_heigth);
    
}
::v-deep(.el-tabs__item){
  font-size: var(--Click_Menu_FontSize);
}
::v-deep(.el-tabs__header .el-tabs__item){
      border-top: none !important;
    }
::v-deep(.el-tabs__item:focus-visible){
  box-shadow : none;
}
</style>
